<template>
  <div class="search-form-container">
    <div class="search-form-card">
      <div class="search-form-header">
        <h3 class="search-form-title">
          <i class="pi pi-search"></i>
          查询条件
        </h3>
        <div class="search-form-actions">
          <Button 
            icon="pi pi-search" 
            label="查询" 
            severity="primary"
            @click="handleSearch"
            :loading="loading"
          />
          <Button 
            icon="pi pi-refresh" 
            label="重置" 
            severity="secondary"
            @click="handleReset"
          />
        </div>
      </div>
      
      <div class="search-form-content">
        <div class="search-form-row">
          <div 
            v-for="field in visibleFields" 
            :key="field.prop"
            class="search-form-item"
            :class="getItemClass(field)"
          >
            <label class="search-form-label">
              {{ field.label }}
              <span v-if="field.required" class="required">*</span>
            </label>
            <div class="search-form-control">
              <!-- 输入框 -->
              <InputText
                v-if="field.type === 'input'"
                v-model="formData[field.prop]"
                :placeholder="field.placeholder || `请输入${field.label}`"
                :disabled="field.disabled"
                :class="field.class"
                style="height: 32px !important; padding: 6px 12px !important; font-size: 12px !important; line-height: 20px !important;"
                @keyup.enter="handleSearch"
              />
              
              <!-- 数字输入框 -->
              <InputNumber
                v-else-if="field.type === 'number'"
                v-model="formData[field.prop]"
                :placeholder="field.placeholder || `请输入${field.label}`"
                :disabled="field.disabled"
                :min="field.min"
                :max="field.max"
                :step="field.step"
                :class="field.class"
                style="height: 32px !important; font-size: 12px !important;"
                @keyup.enter="handleSearch"
              />
              
              <!-- 下拉选择 -->
              <Dropdown
                v-else-if="field.type === 'select'"
                v-model="formData[field.prop]"
                :options="field.options"
                :option-label="field.optionLabel || 'label'"
                :option-value="field.optionValue || 'value'"
                :placeholder="field.placeholder || `请选择${field.label}`"
                :disabled="field.disabled"
                :class="field.class"
                :filter="field.filter"
                :show-clear="field.showClear !== false"
                size="small"
                style="height: 32px !important; min-height: 32px !important; max-height: 32px !important; font-size: 12px !important;"
                class="small-dropdown"
              />
              
              <!-- 日期选择器 -->
              <Calendar
                v-else-if="field.type === 'date'"
                v-model="formData[field.prop]"
                :placeholder="field.placeholder || `请选择${field.label}`"
                :disabled="field.disabled"
                :class="field.class"
                :show-icon="true"
                icon-display="input"
                icon="pi pi-calendar"
                :date-format="field.dateFormat || 'yy-mm-dd'"
                :show-clear="field.showClear !== false"
              />
              
              <!-- 日期范围选择器 -->
              <div v-else-if="field.type === 'daterange'" class="date-range-picker">
                <Calendar
                  v-model="formData[field.prop + '_start']"
                  :placeholder="field.startPlaceholder || '开始日期'"
                  :disabled="field.disabled"
                  :class="field.class"
                  :show-icon="true"
                  icon-display="input"
                  icon="pi pi-calendar"
                  :date-format="field.dateFormat || 'yy-mm-dd'"
                  :show-clear="field.showClear !== false"
                />
                <span class="date-range-separator">至</span>
                <Calendar
                  v-model="formData[field.prop + '_end']"
                  :placeholder="field.endPlaceholder || '结束日期'"
                  :disabled="field.disabled"
                  :class="field.class"
                  :show-icon="true"
                  icon-display="input"
                  icon="pi pi-calendar"
                  :date-format="field.dateFormat || 'yy-mm-dd'"
                  :show-clear="field.showClear !== false"
                />
              </div>
              
              <!-- 多选下拉 -->
              <MultiSelect
                v-else-if="field.type === 'multiselect'"
                v-model="formData[field.prop]"
                :options="field.options"
                :option-label="field.optionLabel || 'label'"
                :option-value="field.optionValue || 'value'"
                :placeholder="field.placeholder || `请选择${field.label}`"
                :disabled="field.disabled"
                :class="field.class"
                :filter="field.filter"
                :show-clear="field.showClear !== false"
                :max-selected-labels="field.maxSelectedLabels || 3"
                size="small"
              />
              
              <!-- 文本域 -->
              <Textarea
                v-else-if="field.type === 'textarea'"
                v-model="formData[field.prop]"
                :placeholder="field.placeholder || `请输入${field.label}`"
                :disabled="field.disabled"
                :class="field.class"
                :rows="field.rows || 3"
                :auto-resize="field.autoResize !== false"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import InputNumber from 'primevue/inputnumber'
import Dropdown from 'primevue/dropdown'
import Calendar from 'primevue/calendar'
import MultiSelect from 'primevue/multiselect'
import Textarea from 'primevue/textarea'

export interface SearchField {
  prop: string
  label: string
  type: 'input' | 'number' | 'select' | 'date' | 'daterange' | 'multiselect' | 'textarea'
  placeholder?: string
  required?: boolean
  disabled?: boolean
  class?: string
  // 选择框相关
  options?: Array<{ label: string; value: any }>
  optionLabel?: string
  optionValue?: string
  filter?: boolean
  showClear?: boolean
  // 数字输入框相关
  min?: number
  max?: number
  step?: number
  // 日期相关
  dateFormat?: string
  startPlaceholder?: string
  endPlaceholder?: string
  // 多选相关
  maxSelectedLabels?: number
  // 文本域相关
  rows?: number
  autoResize?: boolean
  // 高级搜索
  advanced?: boolean
}

interface Props {
  fields: SearchField[]
  modelValue?: Record<string, any>
  loading?: boolean
  columns?: number
}

interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'search', value: Record<string, any>): void
  (e: 'reset'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({}),
  loading: false,
  columns: 3
})

const emit = defineEmits<Emits>()

const formData = ref<Record<string, any>>({})

// 计算可见字段 - 始终显示所有字段
const visibleFields = computed(() => {
  return props.fields
})

// 获取字段样式类
const getItemClass = (field: SearchField) => {
  const classes = ['search-form-field']
  if (field.required) {
    classes.push('required')
  }
  if (field.disabled) {
    classes.push('disabled')
  }
  return classes
}

// 初始化表单数据
const initFormData = () => {
  const data: Record<string, any> = {}
  props.fields.forEach(field => {
    if (field.type === 'daterange') {
      data[field.prop + '_start'] = null
      data[field.prop + '_end'] = null
    } else {
      data[field.prop] = null
    }
  })
  formData.value = { ...data, ...props.modelValue }
}

// 处理搜索
const handleSearch = () => {
  const searchData = { ...formData.value }
  
  // 处理日期范围
  props.fields.forEach(field => {
    if (field.type === 'daterange') {
      const startKey = field.prop + '_start'
      const endKey = field.prop + '_end'
      if (searchData[startKey] || searchData[endKey]) {
        searchData[field.prop] = {
          start: searchData[startKey],
          end: searchData[endKey]
        }
      }
      delete searchData[startKey]
      delete searchData[endKey]
    }
  })
  
  emit('update:modelValue', searchData)
  emit('search', searchData)
}

// 处理重置
const handleReset = () => {
  initFormData()
  emit('update:modelValue', formData.value)
  emit('reset')
}


// 监听外部数据变化
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    formData.value = { ...formData.value, ...newValue }
  }
}, { deep: true })

onMounted(() => {
  initFormData()
})
</script>

<style scoped>
.search-form-container {
  margin-bottom: 16px;
}

.search-form-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  overflow: hidden;
}

.search-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.search-form-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-form-title i {
  color: #1890ff;
}

.search-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 按钮样式覆盖 */
.search-form-actions :deep(.p-button) {
  height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}

.search-form-content {
  padding: 16px;
}

.search-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 16px;
}

.search-form-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-form-label {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-form-label .required {
  color: #ff4d4f;
  font-weight: bold;
}

.search-form-control {
  width: 100%;
}

/* 输入框样式覆盖 */
.search-form-control :deep(.p-inputtext) {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
}

/* 通用组件尺寸控制 */
.search-form-control :deep(.p-component) {
  font-size: 12px !important;
}

.search-form-control :deep(.p-inputnumber) {
  height: 32px !important;
}

.search-form-control :deep(.p-inputnumber .p-inputtext) {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
}

.search-form-control :deep(.p-dropdown) {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}

.search-form-control :deep(.p-dropdown .p-dropdown-label) {
  padding: 6px 12px !important;
  font-size: 12px !important;
  height: 32px !important;
  line-height: 20px !important;
}

.search-form-control :deep(.p-dropdown .p-dropdown-trigger) {
  height: 32px !important;
  width: 32px !important;
}

.search-form-control :deep(.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon) {
  font-size: 12px !important;
}

/* 下拉框面板样式 */
.search-form-control :deep(.p-dropdown-panel) {
  font-size: 12px !important;
}

.search-form-control :deep(.p-dropdown-panel .p-dropdown-items .p-dropdown-item) {
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
}

/* 下拉框选项字体 */
:deep(.p-dropdown-panel .p-dropdown-items .p-dropdown-item) {
  font-size: 12px !important;
  line-height: 20px !important;
  padding: 6px 12px !important;
}

:deep(.p-dropdown-panel .p-dropdown-items) {
  font-size: 12px !important;
}

:deep(.p-dropdown-panel) {
  font-size: 12px !important;
}

/* 额外的下拉框样式强制覆盖 */
.search-form-control :deep(.p-dropdown .p-dropdown-label-container) {
  height: 32px !important;
  line-height: 20px !important;
}

.search-form-control :deep(.p-dropdown .p-dropdown-label-container .p-dropdown-label) {
  height: 32px !important;
  line-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

/* 最高优先级的下拉框样式覆盖 */
.search-form .search-form-control :deep(.p-dropdown) {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
}

.search-form .search-form-control :deep(.p-dropdown .p-dropdown-label) {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.search-form .search-form-control :deep(.p-dropdown .p-dropdown-trigger) {
  height: 32px !important;
  width: 32px !important;
}

.search-form .search-form-control :deep(.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon) {
  font-size: 12px !important;
}

/* 全局下拉框样式覆盖 - 最高优先级 */
.search-form :deep(.p-dropdown) {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
}

.search-form :deep(.p-dropdown .p-dropdown-label) {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.search-form :deep(.p-dropdown .p-dropdown-trigger) {
  height: 32px !important;
  width: 32px !important;
}

.search-form :deep(.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon) {
  font-size: 12px !important;
}

/* 针对search-form-control内的下拉框强制样式 */
.search-form-control .p-dropdown {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
}

.search-form-control .p-dropdown .p-dropdown-label {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.search-form-control .p-dropdown .p-dropdown-trigger {
  height: 32px !important;
  width: 32px !important;
}

.search-form-control .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
  font-size: 12px !important;
}

/* 最高优先级的下拉框样式 - 不使用:deep */
.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
}

.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown .p-dropdown-label {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown .p-dropdown-trigger {
  height: 32px !important;
  width: 32px !important;
}

.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
  font-size: 12px !important;
}

/* 下拉框placeholder样式 */
.small-dropdown :deep(.p-dropdown-label) {
  font-size: 12px !important;
  line-height: 20px !important;
}

.small-dropdown :deep(.p-dropdown-label.p-placeholder) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #6c757d !important;
}

/* 下拉框选中值样式 */
.small-dropdown :deep(.p-dropdown-label:not(.p-placeholder)) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #333 !important;
}

/* 强制placeholder字体大小 */
.search-form-control :deep(.p-dropdown .p-dropdown-label.p-placeholder) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #6c757d !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.search-form :deep(.p-dropdown .p-dropdown-label.p-placeholder) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #6c757d !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

/* MultiSelect placeholder样式 */
.search-form-control :deep(.p-multiselect .p-multiselect-label.p-placeholder) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #6c757d !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.search-form :deep(.p-multiselect .p-multiselect-label.p-placeholder) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #6c757d !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

/* 强制选中值字体大小 */
.search-form-control :deep(.p-dropdown .p-dropdown-label:not(.p-placeholder)) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #333 !important;
}

.search-form :deep(.p-dropdown .p-dropdown-label:not(.p-placeholder)) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #333 !important;
}

/* 所有输入组件的placeholder样式 */
.search-form-control :deep(.p-inputtext::placeholder) {
  font-size: 12px !important;
  color: #6c757d !important;
}

.search-form-control :deep(.p-inputnumber .p-inputtext::placeholder) {
  font-size: 12px !important;
  color: #6c757d !important;
}

.search-form-control :deep(.p-calendar .p-inputtext::placeholder) {
  font-size: 12px !important;
  color: #6c757d !important;
}

.search-form-control :deep(.p-multiselect .p-multiselect-label.p-placeholder) {
  font-size: 12px !important;
  color: #6c757d !important;
}

/* 最高优先级的placeholder样式 */
.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown .p-dropdown-label.p-placeholder {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #6c757d !important;
}

.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-inputtext::placeholder {
  font-size: 12px !important;
  color: #6c757d !important;
}

/* 最高优先级的选中值样式 */
.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown .p-dropdown-label:not(.p-placeholder) {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #333 !important;
}

/* 通用下拉框标签样式 - 覆盖所有状态 */
.search-form-control :deep(.p-dropdown .p-dropdown-label) {
  font-size: 12px !important;
  line-height: 20px !important;
}

.search-form :deep(.p-dropdown .p-dropdown-label) {
  font-size: 12px !important;
  line-height: 20px !important;
}

/* 最高优先级的下拉框标签样式 */
.search-form-container .search-form-card .search-form-content .search-form-row .search-form-item .search-form-control .p-dropdown .p-dropdown-label {
  font-size: 12px !important;
  line-height: 20px !important;
}

/* 下拉框面板选项样式 */
.search-form-control :deep(.p-dropdown-panel .p-dropdown-items .p-dropdown-item) {
  font-size: 12px !important;
  line-height: 20px !important;
  padding: 6px 12px !important;
}

.search-form :deep(.p-dropdown-panel .p-dropdown-items .p-dropdown-item) {
  font-size: 12px !important;
  line-height: 20px !important;
  padding: 6px 12px !important;
}

.search-form-control :deep(.p-calendar) {
  height: 32px !important;
}

.search-form-control :deep(.p-calendar .p-inputtext) {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
}

.search-form-control :deep(.p-calendar .p-datepicker-trigger) {
  height: 32px !important;
  width: 32px !important;
}

.search-form-control :deep(.p-calendar .p-datepicker-trigger .p-datepicker-trigger-icon) {
  font-size: 12px !important;
}

.search-form-control :deep(.p-multiselect) {
  min-height: 32px !important;
  height: 32px !important;
}

.search-form-control :deep(.p-multiselect .p-multiselect-label) {
  padding: 6px 12px !important;
  font-size: 12px !important;
  height: 32px !important;
  line-height: 20px !important;
}

.search-form-control :deep(.p-multiselect .p-multiselect-trigger) {
  height: 32px !important;
  width: 32px !important;
}

.search-form-control :deep(.p-multiselect .p-multiselect-trigger .p-multiselect-trigger-icon) {
  font-size: 12px !important;
}

.search-form-control :deep(.p-inputtextarea) {
  font-size: 12px !important;
  padding: 6px 12px !important;
  line-height: 1.4 !important;
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-range-picker :deep(.p-calendar) {
  height: 32px !important;
}

.date-range-picker :deep(.p-calendar .p-inputtext) {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
}

.date-range-picker :deep(.p-calendar .p-datepicker-trigger) {
  height: 32px !important;
  width: 32px !important;
}

.date-range-picker :deep(.p-calendar .p-datepicker-trigger .p-datepicker-trigger-icon) {
  font-size: 12px !important;
}

.date-range-separator {
  color: #666;
  font-size: 12px;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form-row {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 768px) {
  .search-form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .search-form-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 4px;
  }
  
  .search-form-content {
    padding: 12px;
  }
  
  .search-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .date-range-picker {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .date-range-separator {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .search-form-header {
    padding: 10px 12px;
  }
  
  .search-form-content {
    padding: 10px;
  }
  
  .search-form-actions {
    flex-wrap: wrap;
    gap: 3px;
  }
}
</style>
